<template>
  <div class="container">
    <Navbar title="我的邀请码"></Navbar>
    <div class="promocode-box">
      <div class="item-box">
        <div class="item-left">
          <div class="value">{{promo.code || '暂无'}}</div>
          <div class="tit">我的邀请码</div>
          <div class="copy" v-if="promo.code">复制</div>
        </div>
        <div class="item-right">
          <div class="value">{{promo.invite_user_reward || '￥0'}}</div>
          <div class="tit">邀请奖励金</div>
        </div>
      </div>
      <div class="info">
        <p>邀请者分享邀请链接给其他人下单成功后，将的到如下对应金额奖励：</p>
        <p>邀请人奖励:0元</p>
        <p>被邀请人奖励：0元</p>
        <p>订单抽成：0%</p>
      </div>
    </div>
    <van-tabs v-model:active="active" color="#3ca7fa" line-width="68px">
      <van-tab title="邀请记录"></van-tab>
      <van-tab title="资金明细"></van-tab>
      <van-tab title="提现明细"></van-tab>
    </van-tabs>
    <Empty v-show="list.length == 0"></Empty>
  </div>
</template>

<script>
import Navbar from '@/components/common/Navbar';
import Empty from '@/components/common/Empty';
import { getPromoCode } from '@/network/member';

export default {
  components: {
    Navbar,
    Empty,
  },
  data() {
    return {
      active: 0,
      promo: {},
      list: [],
    };
  },
  created() {
    getPromoCode().then((res) => {
      this.promo = res.data;
    });
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  background-color: #f6f6f6;
  .promocode-box {
    background-color: #1784ed;
    padding: 28px 16px 20px;
    .item-box {
      display: flex;
      justify-content: space-between;
      background: linear-gradient(180deg,#fff6cf,#ffeaa1);
      border-radius: 4px;
      padding: 28px 16px;
      .item-left,
      .item-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        .value {
          font-size: 20px;
        }
      }
      .item-left {
        .tit {
          font-size: 12px;
          margin-right: 18px;
          padding: 12px 0;
        }
        .copy {
          width: 96px;
          height: 28px;
          line-height: 28px;
          margin-left: 14px;
          color: #1784ed;
          text-align: center;
          border: 1px solid #1784ed;
          border-radius: 16px;
        }
      }
      .item-right {
        .tit {
          margin-top: 20px;
          font-size: 12px;
        }
      }
    }
    .info {
      color: #fff;
      font-size: 13.2px;
      margin-top: 12px;
      line-height: 26px;
    }
  }
}
</style>
